<template>
  <div>
    <div v-for="item in arr">
      <span>{{ item.shopName }}</span>
      <span> {{ item.price }}元/份</span>
    </div>
    <p>请选择购买数量：</p>
    <goods-item
      v-for="(item, index) in arr"
      :item="item"
      @add="add"
      @del="del"
      :index="index"
    />
    <p>总价为： {{ sum }}</p>
  </div>
</template>

<script>
import GoodsItem from "components/goodItem/GoodsItem";

export default {
  data() {
    return {
      arr: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  components: {
    GoodsItem,
  },
  computed: {
    sum() {
      return (this.arr.reduce((old, item) => (old += item.price * item.count), 0)).toFixed(2);
    },
  },
  methods: {
    add(index) {
      this.arr[index].count++;
    },
    del(index) {
      if (this.arr[index].count <= 0) return this.$prompt.show('不能再减啦！')
      this.arr[index].count--;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>